// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ F R E E B O A R D                                                  │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2013 Jim Heising (https://github.com/jheising)         │ \\
// │ Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)               │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT license.                                    │ \\
// └────────────────────────────────────────────────────────────────────┘ \\

(function () {
    var SPARKLINE_HISTORY_LENGTH = 100;
    var SPARKLINE_COLORS = ["#FF9900", "#FFFFFF", "#B3B4B4", "#6B6B6B", "#28DE28", "#13F7F9", "#E6EE18", "#C41204", "#CA3CB8", "#0B1CFB"];

    function easeTransitionText(newValue, textElement, duration) {

        var currentValue = $(textElement).text();

        if (currentValue == newValue)
            return;

        if ($.isNumeric(newValue) && $.isNumeric(currentValue)) {
            var numParts = newValue.toString().split('.');
            var endingPrecision = 0;

            if (numParts.length > 1) {
                endingPrecision = numParts[1].length;
            }

            numParts = currentValue.toString().split('.');
            var startingPrecision = 0;

            if (numParts.length > 1) {
                startingPrecision = numParts[1].length;
            }

            jQuery({
                transitionValue: Number(currentValue),
                precisionValue: startingPrecision
            }).animate({transitionValue: Number(newValue), precisionValue: endingPrecision}, {
                duration: duration,
                step: function () {
                    $(textElement).text(this.transitionValue.toFixed(this.precisionValue));
                },
                done: function () {
                    $(textElement).text(newValue);
                }
            });
        }
        else {
            $(textElement).text(newValue);
        }
    }

    function addSparklineLegend(element, legend) {
        var legendElt = $("<div class='sparkline-legend'></div>");
        for (var i = 0; i < legend.length; i++) {
            var color = SPARKLINE_COLORS[i % SPARKLINE_COLORS.length];
            var label = legend[i];
            legendElt.append("<div class='sparkline-legend-value'><span style='color:" +
                color + "'>&#9679;</span>" + label + "</div>");
        }
        element.empty().append(legendElt);

        freeboard.addStyle('.sparkline-legend', "margin:5px;");
        freeboard.addStyle('.sparkline-legend-value',
            'color:white; font:10px arial,san serif; float:left; overflow:hidden; width:50%;');
        freeboard.addStyle('.sparkline-legend-value span',
            'font-weight:bold; padding-right:5px;');
    }

    function addValueToSparkline(element, value, legend) {
        var values = $(element).data().values;
        var valueMin = $(element).data().valueMin;
        var valueMax = $(element).data().valueMax;
        if (!values) {
            values = [];
            valueMin = undefined;
            valueMax = undefined;
        }

        var collateValues = function (val, plotIndex) {
            if (!values[plotIndex]) {
                values[plotIndex] = [];
            }
            if (values[plotIndex].length >= SPARKLINE_HISTORY_LENGTH) {
                values[plotIndex].shift();
            }
            values[plotIndex].push(Number(val));

            if (valueMin === undefined || val < valueMin) {
                valueMin = val;
            }
            if (valueMax === undefined || val > valueMax) {
                valueMax = val;
            }
        }

        if (_.isArray(value)) {
            _.each(value, collateValues);
        } else {
            collateValues(value, 0);
        }
        $(element).data().values = values;
        $(element).data().valueMin = valueMin;
        $(element).data().valueMax = valueMax;

        var tooltipHTML = '<span style="color: {{color}}">&#9679;</span> {{y}}';

        var composite = false;
        _.each(values, function (valueArray, valueIndex) {
            $(element).sparkline(valueArray, {
                type: "line",
                composite: composite,
                height: "100%",
                width: "100%",
                fillColor: false,
                lineColor: SPARKLINE_COLORS[valueIndex % SPARKLINE_COLORS.length],
                lineWidth: 2,
                spotRadius: 3,
                spotColor: false,
                minSpotColor: "#78AB49",
                maxSpotColor: "#78AB49",
                highlightSpotColor: "#9D3926",
                highlightLineColor: "#9D3926",
                chartRangeMin: valueMin,
                chartRangeMax: valueMax,
                tooltipFormat: (legend && legend[valueIndex]) ? tooltipHTML + ' (' + legend[valueIndex] + ')' : tooltipHTML
            });
            composite = true;
        });
    }

    var gaugeID = 0;

    //  自定义地图
    var eChartsMapWidget = function (settings) {
        var thisGaugeID = "gauge-" + gaugeID++;
        var htmlElement = $('<div class="custom-widget">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:430px;width: 100%"></div>' + '</div>');
        var currentSettings = settings;
        var geoCoord = {
            "昆明市": [102.712251, 25.040609],
            "昭通市": [103.717216, 27.536999],
            "曲靖市": [103.797851, 25.501557],
            "玉溪市": [102.043907, 24.050461],
            "普洱市": [100.772344, 23.077321],
            "临沧市": [99.58697, 23.886567],
            "保山市": [99.167133, 24.811802],
            "丽江市": [100.633026, 26.872108],
            "文山壮族苗族自治州": [104.74401, 23.66951],
            "红河哈尼族彝族自治州": [102.784182, 23.366775],
            "西双版纳傣族自治州": [100.797941, 22.001724],
            "楚雄彝族自治州": [101.546046, 25.341988],
            "大理白族自治州": [100.025668, 25.789449],
            "德宏傣族景颇族自治州": [98.078363, 24.436694],
            "迪庆藏族自治州": [99.706463, 27.826853]
        };
        var YNData = [
            [{name: "昆明市"}, {name: "昭通市", value: 50, upLinkData: 100, totalData: 150}],
            [{name: "昆明市"}, {name: "曲靖市", value: 50, upLinkData: 100, totalData: 150}],
            [{name: "昆明市"}, {name: "玉溪市", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "普洱市", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "临沧市", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "保山市", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "丽江市", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "文山壮族苗族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "红河哈尼族彝族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "西双版纳傣族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "楚雄彝族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "大理白族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "德宏傣族景颇族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
            [{name: "昆明市"}, {name: "迪庆藏族自治州", value: 50, downStreamData: 120, upLinkData: 100}],
        ];
        var mapData = [
            {name: "昆明市", value: [102.712251, 25.040609, 40]},
            {name: "昭通市", value: [103.717216, 27.536999, 70]},
            {name: "曲靖市", value: [103.797851, 25.501557, 80]},
            {name: "玉溪市", value: [102.043907, 24.050461, 50]},
            {name: "普洱市", value: [100.772344, 23.077321, 90]},
            {name: "临沧市", value: [99.58697, 23.886567, 100]},
            {name: "保山市", value: [99.167133, 24.811802, 140]},
            {name: "丽江市", value: [100.633026, 26.872108, 80]},
            {name: "文山壮族苗族自治州", value: [104.74401, 23.66951, 10]},
            {name: "红河哈尼族彝族自治州", value: [102.784182, 23.366775, 200]},
            {name: "西双版纳傣族自治州", value: [100.797941, 22.001724, 0]},
            {name: "楚雄彝族自治州", value: [101.546046, 25.341988, 18]},
            {name: "大理白族自治州", value: [100.025668, 25.789449, 90]},
            {name: "德宏傣族景颇族自治州", value: [98.078363, 24.436694, 150]},
            {name: "怒江傈僳族自治州", value: [98.854304, 26.550949, 150]},
            {name: "迪庆藏族自治州", value: [99.706463, 27.826853, 60]}
        ];
        // var upLinkData;
        // var downStreamData;
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoord[dataItem[0].name];
                var toCoord = geoCoord[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        value: dataItem[1].value,
                        upLinkData: dataItem[1].upLinkData,
                        totalData: dataItem[1].totalData,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };
        var option = {
            tooltip: {
                formatter: function (params) {
                    var tipArr = convertData(YNData)
                    if (params.componentSubType === "map") {
                        var name = params.name;
                        for (var i = 0; i < tipArr.length; i++) {
                            if (name === tipArr[i].toName) {
                                return '<div><p>' + [
                                    '昆明市→' + name,
                                    '下行流量：' + tipArr[i].value + 'M',
                                    name + '→昆明市',
                                    '上行流量：' + tipArr[i].upLinkData + 'M',
                                    '总流量：' + tipArr[i].totalData + 'M'
                                ].join('</p><p>') + '</p></div>'
                            }
                        }
                    }
                }
            },
            visualMap: {
                show: false,
                type: "piecewise", // 分段型
                min: 0,       		// 值域最小值，必须参数
                max: 45,			// 值域最大值，必须参数
                calculable: true,	// 是否启用值域漫游
                inRange: {
                    color: ["#007970", "#eac736", "#d94e5d"]
                    // 指定数值从低到高时的颜色变化
                },
            },
            geo: {
                map: "云南",
                label: {
                    emphasis: {
                        show: false
                    }
                },
                aspectScale: 1.2,
                zoom: 1.2,
                roam: false,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        shadowColor: "#1b5b96",
                        shadowBlur: 2,
                        shadowOffsetX: 8,
                        shadowOffsetY: 8,
                        areaColor: "#004096",
                        borderColor: "#266b92"
                    },
                    emphasis: {
                        areaColor: "#2a333d"
                    }
                },

            },
            series: [
                {
                    type: "map",
                    map: "云南",
                    coordinateSystem: "geo",
                    aspectScale: 1.2,
                    zoom: 1.2,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: "#fff"
                            }
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: "rgba(53,142,193,0.4)",
                            borderColor: "#79bdde",
                            opacity: 0.6
                        },
                        emphasis: {
                            areaColor: "rgba(37,78,144,1)",

                        }
                    },
                },
                {
                    name: "云南地图迁徙线",
                    type: "lines",
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        symbolSize: 5,
                    },
                    lineStyle: {
                        normal: {
                            width: 0.5,
                            curveness: -0.3
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    data: []
                },
                {
                    name: "云南地图各省标记点",
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    zlevel: 2,
                    rippleEffect: {
                        brushType: "stroke"
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "right",
                            formatter: "{b}"
                        }
                    },
                    symbolSize: 10,
                    data: []
                }
            ]
        };

        var creatElement = function () {
            setTimeout(function () {
                var dom = document.getElementById(thisGaugeID);
                var myChart = echarts.init(dom);
                myChart.setOption(option, true);
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(htmlElement);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            YNData = value
            for (var i = 0; i < value.length; i++) {
                mapData[i + 1].value[2] = value[i][1].value;
            }
            mapData[0] = {name: "昆明市", value: [102.712251, 25.040609, 40]};
            option.series[1].data = convertData(value);
            option.series[2].data = mapData;
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(7)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "Map",
        "display_name": "地图",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsMapWidget(settings));
        }
    });

    //  自定义存储
    var eChartsGuageWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget" style="width: 100%;float: left;">' + '<div class="custom-wrapper" id="' + thisGaugeID_1 + '" style="height:160px;"></div>' + '</div>');
        var htmlElement_2 = $('<div class="custom-widget" style="width: 100%;float: left;">' + '<div class="custom-wrapper" id="' + thisGaugeID_2 + '" style="height:160px;"></div>' + '</div>');
        var pointer = $('<div class="pointer-box">' +
            '<span class="pointer on"></span>' +
            '<span class="pointer"></span>' +
            '</div>');
        var firstData;
        var secondData;
        var index = 0;
        var interval;
        var currentSettings = settings;
        var option_1 = {
            title: {
                text: '异常磁盘数',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            series: [
                {
                    name: "存储1",
                    type: "gauge",
                    center: ["13%", "55%"],    // 默认全局居中
                    radius: "50%",
                    min: 0,
                    max: 100,
                    endAngle: 52,
                    startAngle: 230,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, "#fcb5fc"], [0.86, "#de5f51"], [1, "#00cafc"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontSize: 8,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 6,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "2"
                    },
                    splitLine: {           // 分隔线
                        length: 10,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "55%"
                    },
                    title: {
                        offsetCenter: [0, "145%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        },
                        borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [3, "75%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 11
                        }
                    },
                    data: []
                },
                {
                    name: "存储2",
                    type: "gauge",
                    center: ["30%", "55%"],    // 默认全局居中
                    radius: "60%",
                    min: 0,
                    max: 100,
                    endAngle: 65,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, "#a754ff"], [0.86, "#d1c001"], [1, "#00c9fb"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontSize: 8,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "3"
                    },
                    splitLine: {           // 分隔线
                        length: 12,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "50%"
                    },
                    title: {
                        offsetCenter: [0, "120%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        },
                        borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [0, "65%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 14
                        }
                    },
                    data: []
                },
                {
                    name: "存储3",
                    type: "gauge",
                    min: 0,
                    max: 100,
                    splitNumber: 5,
                    radius: "80%",
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, "#fab4fb"], [0.8, "#a654fe"], [1, "#00cafc"]],
                            width: 3,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式.
                            fontSize: 12,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 10,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 14,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {           // 分隔线
                        length: "70%", //默认透明
                        width: 4
                    },
                    title: {
                        offsetCenter: [0, "103%"],
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        },
                        offsetCenter: [-1, "65%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 18
                        }
                    },
                    data: []
                },
                {
                    name: "存储4",
                    type: "gauge",
                    center: ["70%", "55%"],    // 默认全局居中
                    radius: "60%",
                    min: 0,
                    max: 100,
                    startAngle: 115,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, "#fcb5fc"], [0.86, "#7bfc53"], [1, "#00c9fb"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontSize: 8,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "3"
                    },
                    splitLine: {           // 分隔线
                        length: 12,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "50%"
                    },
                    title: {
                        offsetCenter: [0, "120%"],      // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        }, borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [0, "65%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 14
                        }
                    },
                    data: []
                },
                {
                    name: "存储5",
                    type: "gauge",
                    center: ["87%", "55%"],    // 默认全局居中
                    radius: "50%",
                    min: 0,
                    max: 100,
                    endAngle: -40,
                    startAngle: 128,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.25, "#fcb5fc"], [0.75, "#ff36d7"], [1, "#00cafc"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10,
                            fontSize: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 6,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "2"
                    },
                    splitLine: {           // 分隔线
                        length: 10,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "55%"
                    },
                    title: {
                        offsetCenter: [0, "145%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        }, borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [-5, "75%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 11
                        }
                    },
                    data: []
                }
            ]
        };
        var option_2 = {
            title: {
                text: '空间已分配比率',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            series: [
                {
                    name: "存储1",
                    type: "gauge",
                    center: ["13%", "55%"],    // 默认全局居中
                    radius: "50%",
                    min: 0,
                    max: 100,
                    endAngle: 52,
                    startAngle: 230,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, "#fcb5fc"], [0.86, "#de5f51"], [1, "#00cafc"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontSize: 8,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 6,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "2"
                    },
                    splitLine: {           // 分隔线
                        length: 10,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "55%"
                    },
                    title: {
                        offsetCenter: [0, "145%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        },
                        borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [3, "75%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 14
                        }
                    },
                    data: []
                },
                {
                    name: "存储2",
                    type: "gauge",
                    center: ["30%", "55%"],    // 默认全局居中
                    radius: "60%",
                    min: 0,
                    max: 100,
                    endAngle: 65,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, "#a754ff"], [0.86, "#d1c001"], [1, "#00c9fb"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontSize: 8,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "3"
                    },
                    splitLine: {           // 分隔线
                        length: 12,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "50%"
                    },
                    title: {
                        offsetCenter: [0, "120%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        },
                        borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [0, "65%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 18
                        }
                    },
                    data: []
                },
                {
                    name: "存储3",
                    type: "gauge",
                    min: 0,
                    max: 100,
                    splitNumber: 5,
                    radius: "80%",
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, "#fab4fb"], [0.8, "#a654fe"], [1, "#00cafc"]],
                            width: 3,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式.
                            fontSize: 12,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 10,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 14,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {           // 分隔线
                        length: "70%", //默认透明
                        width: 4
                    },
                    title: {
                        offsetCenter: [0, "103%"],
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        },
                        offsetCenter: [-1, "65%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 20
                        }
                    },
                    data: []
                },
                {
                    name: "存储4",
                    type: "gauge",
                    center: ["70%", "55%"],    // 默认全局居中
                    radius: "60%",
                    min: 0,
                    max: 100,
                    startAngle: 115,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.29, "#fcb5fc"], [0.86, "#7bfc53"], [1, "#00c9fb"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontSize: 8,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "3"
                    },
                    splitLine: {           // 分隔线
                        length: 12,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "50%"
                    },
                    title: {
                        offsetCenter: [0, "120%"],      // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        }, borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [0, "65%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 18
                        }
                    },
                    data: []
                },
                {
                    name: "存储5",
                    type: "gauge",
                    center: ["87%", "55%"],    // 默认全局居中
                    radius: "50%",
                    min: 0,
                    max: 100,
                    endAngle: -40,
                    startAngle: 128,
                    splitNumber: 4,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.25, "#fcb5fc"], [0.75, "#ff36d7"], [1, "#00cafc"]],
                            width: 2,
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10,
                            fontSize: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 6,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: "auto",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        },
                        splitNumber: "2"
                    },
                    splitLine: {           // 分隔线
                        length: 10,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        length: "55%"
                    },
                    title: {
                        offsetCenter: [0, "145%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: "bolder",
                            fontSize: 10,
                            color: "#fff",
                            shadowColor: "#fff", //默认透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        formatter: function (val) {
                            return val + "%"
                        }, borderColor: "#fff",
                        shadowColor: "#fff", //默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [-5, "75%"],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: "#fff",
                            fontSize: 14
                        }
                    },
                    data: []
                }
            ]
        };
        var nextPage = function () {
            interval = setInterval(function () {
                setTimeout(function () {
                    if (index === 0) {
                        $($('.pointer')[index]).removeClass("on");
                        index = 1;
                        $($('.pointer')[index]).addClass("on");
                        $(htmlElement_1).fadeOut(2500, function () {
                            $(htmlElement_2).fadeIn(2500)
                        })
                    } else if (index === 1) {
                        $($('.pointer')[index]).removeClass("on");
                        index = 0;
                        $($('.pointer')[index]).addClass("on");
                        $(htmlElement_2).fadeOut(2500, function () {
                            $(htmlElement_1).fadeIn(2500)
                        })
                    }
                }, 1000)
                creatElement()
            }, 5000)

        };

        var creatElement = function () {
            setTimeout(function () {
                var dom_1 = document.getElementById(thisGaugeID_1);
                var myChart_1 = echarts.init(dom_1);
                myChart_1.setOption(option_1, true);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var myChart_2 = echarts.init(dom_2);
                myChart_2.setOption(option_2, true);
                $(htmlElement_2).fadeOut(2500)
            }, 1000);
        };
        this.render = function (element) {
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
                .append(pointer);
            creatElement()
        };

        this.onCalculatedValueChanged = function (settingName, newValue) {
            clearInterval(interval)
            firstData = newValue[0];
            secondData = newValue[1];
            for (var i = 0; i < firstData.length; i++) {
                option_1.series[i].data[0] = firstData[i]
            }
            for (var i = 0; i < secondData.length; i++) {
                option_2.series[i].data[0] = secondData[i]
            }
            nextPage()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
            creatElement()
        };

        this.getHeight = function () {
            return Number(2.5)
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        "type_name": "guage",
        "display_name": "存储",
        "fill_size": true,
        "settings": [
            {
                "name": "value",
                "display_name": "value",
                "type": "calculated",
                "description": "可以是文本HTML，也可以是输出HTML的javascript。"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsGuageWidget(settings));
        }
    });

    // 告警信息列表
    var eChartsAlarmWidget = function (settings) {
        var table_1 = $('<div id="table_1"></div>');
        var currentSettings = settings;
        var tableData_1;
        var tableTb_1 = $('<div id="box_1"></div>');
        var tdData_1 = null;
        var creatTable = function () {
            var num_1 = tableData_1.length;
            tdData_1 = ""
            for (var i = 0; i <= num_1 - 1; i++) {
                tdData_1 += "<div class='td-color' style='margin-top: 10px'>";
                // tdData_1 += "<span class='td'>" + tableData_1[i].level + "</span>";
                tdData_1 += "<div style='font-size: 10px;word-wrap:break-word;white-space: pre-wrap;'>" + tableData_1[i].location + "</div>";
                // tdData_1 += "<span class='td'>" + tableData_1[i].val + "</span>";
                tdData_1 += "</div>"
            }
        };
        var move = function () {
            var marginTop_1 = 0;
            setInterval(function () {
                $("#box_1").children(".td-color").first().animate({"margin-top": marginTop_1--}, 0, function () {
                    if (!$(this).is(":animated")) {
                        if (-marginTop_1 > $(this).height()) {
                            $(this).css("margin-top", "0px").appendTo($("#box_1"));
                            marginTop_1 = 0;
                        }
                    }
                })
            }, 80)
        };
        this.render = function (element) {
            $(element).empty();
            setTimeout(function () {
                tableTb_1.html(tdData_1);
                $(table_1)
                    .append(tableTb_1);
                $(table_1).css(
                    {
                        fontSize: "10px"
                    }
                );
                $(element)
                    .append(table_1)
                move()
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            tableData_1 = newValue.data;
            creatTable();
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(1.5);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "alarm",
        display_name: "当前告警信息",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsAlarmWidget(settings));
        }
    });

    // 系统概览
    var eChartsSystemWidget = function (settings) {
        var htmlElement = $('<img src="img/pic1.png">');
        var text_1 = $('<div></div>');
        var text_2 = $('<div></div>');
        var text_3 = $('<div></div>');
        var text_4 = $('<div></div>');
        var text_5 = $('<div></div>');
        var text_6 = $('<div></div>');
        var text_7 = $('<div></div>');
        var text_8 = $('<div></div>');
        var titleC = $('<div></div>');
        var newData;
        var currentSettings = settings;
        var creatElement = function () {

            var link1 = newData[1] ? newData[1].link : "javascript:void(0)";
            var name1 = newData[1] ? newData[1].name : "";

            var link2 = newData[2] ? newData[2].link : "javascript:void(0)";
            var name2 = newData[2] ? newData[2].name : "";

            var link3 = newData[3] ? newData[3].link : "javascript:void(0)";
            var name3 = newData[3] ? newData[3].name : "";

            var link4 = newData[4] ? newData[4].link : "javascript:void(0)";
            var name4 = newData[4] ? newData[4].name : "";

            var link5 = newData[5] ? newData[5].link : "javascript:void(0)";
            var name5 = newData[5] ? newData[5].name : "";

            var link6 = newData[6] ? newData[6].link : "javascript:void(0)";
            var name6 = newData[6] ? newData[6].name : "";

            var link7 = newData[7] ? newData[7].link : "javascript:void(0)";
            var name7 = newData[7] ? newData[7].name : "";

            var link8 = newData[8] ? newData[8].link : "javascript:void(0)";
            var name8 = newData[8] ? newData[8].name : "";

            var title = newData[0] ? newData[0].title : "";

            var content_1 = '<a href="' + link1 + '" style="color: #EC5145; text-decoration: none">' + name1 +
                // "<span style='color: #fff;'>其他新增报表</span>" +
                // "<span style='color: #74ba0b'>" + newData[0].name + "</span>" +
                // "<span style='color: #fff;'>张</span>" +
                '</a>';
            var content_2 = '<a href="' + link2 + '" style="color: #74BA0B; text-decoration: none">' + name2 +
                // "<span style='color: #fff;'>自动巡查</span>" +
                // "<span style='color: #f4ac00'>" + newData[1].name + "</span>" +
                // "<span style='color: #fff;'>次</span>" +
                '</a>';
            var content_3 = '<a href="' + link3 + '" style="color: #00A6AE; text-decoration: none">' + name3 +
                //                 // "<span style='color: #fff;'>智能越界</span>" +
                // "<span style='color: #f4ac00'>" + newData[2].name + "</span>" +
                // "<span style='color: #fff;'>次</span>" +
                '</a>';
            var content_4 = '<a href="' + link4 + '" style="color: #1982B7; text-decoration: none">' + name4 +
                // "<span style='color: #fff;'>智能越界比例</span>" +
                // "<span style='color: #00a6ae'>" + newData[3].name + "</span>" +
                // "<span style='color: #fff;'>%</span>" +
                '</a>';
            var content_5 = '<a href="' + link5 + '" style="color: #8B3B85; text-decoration: none">' + name5 +
                // "<span style='color: #fff;'>执行智能诊断</span>" +
                // "<span style='color: #f4ac00'>" + newData[4].name + "</span>" +
                // "<span style='color: #fff;'>次</span>" +
                '</a>';
            var content_6 = '<a href="' + link6 + '" style="color: #CB3D73; text-decoration: none">' + name6 +
                // "<span style='color: #fff;'>新增月报表</span>" +
                // "<span style='color: #f4ac00'>" + newData[5].name + "</span>" +
                // "<span style='color: #fff;'>张</span>" +
                '</a>';
            var content_7 = '<a href="' + link7 + '" style="color: #f4ac00; text-decoration: none">' + name7 +
                // "<span style='color: #fff;'>新增周报表</span>" +
                // "<span style='color: #f4ac00'>" + newData[6].name + "</span>" +
                // "<span style='color: #fff;'>张</span>" +
                '</a>';
            var content_8 = '<a href="' + link8 + '" style="color: #FF7510; text-decoration: none">' + name8 +
                // "<span style='color: #fff;'>新增日报表</span>" +
                // "<span style='color: #f4ac00'>" + newData[7].name + "</span>" +
                // "<span style='color: #fff;'>张</span>" +
                '</a>';
            var titleContent = "<p style='color: #fff;margin: 0'>总管理对象</p><p style='color: #39951c;font-size: 18px;margin: 0'>" + title + "</p>";
            text_1.html(content_1);
            text_2.html(content_2);
            text_3.html(content_3);
            text_4.html(content_4);
            text_5.html(content_5);
            text_6.html(content_6);
            text_7.html(content_7);
            text_8.html(content_8);
            titleC.html(titleContent);
        }
        this.render = function (element) {
            setTimeout(function () {
                $(htmlElement).css({
                    display: "block",
                    width: "100%"
                });
                $(text_1).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "60px",
                    left: "255px"
                });
                $(text_2).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "98px",
                    left: "270px"
                });
                $(text_3).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "130px",
                    left: "264px"
                });
                $(text_4).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "174px",
                    left: "240px"
                });
                $(text_5).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "183px",
                    right: "266px"
                });
                $(text_6).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "144px",
                    right: "284px"
                });
                $(text_7).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "91px",
                    right: "285px"
                });
                $(text_8).css({
                    position: "absolute",
                    fontSize: "10px",
                    top: "55px",
                    right: "278px"
                });
                $(titleC).css({
                    position: "absolute",
                    top: "105px",
                    left: "142px",
                    textAlign: "center"
                });
                $(element)
                    .append(htmlElement)
                    .append(text_1)
                    .append(text_2)
                    .append(text_3)
                    .append(text_4)
                    .append(text_5)
                    .append(text_6)
                    .append(text_7)
                    .append(text_8)
                    .append(titleC)
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            newData = newValue
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(3.5);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "System",
        display_name: "系统概览",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsSystemWidget(settings));
        }
    });

    // 3D机房
    // var eChartsPic2Widget = function (settings) {
    //     var iframeSrc = "http://10.193.98.8/cas/login?username=admin&username2=c21hcnRhZG1pbg==&module=/machineroom/topologyView/view&hideHeader=true";
    //     var htmlElement = $('<iframe src=' + iframeSrc + ' width="180px" height="130px">');
    //     var iframeBox = $('<div></div>')
    //     var currentSettings = settings;
    //     this.render = function (element) {
    //         $(element).empty();
    //         $(iframeBox).css({
    //             position: "relative",
    //             overflow: "hidden",
    //             height: "130px",
    //             width: "180px"
    //         })
    //         // $(htmlElement).css({
    //         //     transform: "scale(0.15)",
    //         //     position: "absolute",
    //         //     left: "-62px",
    //         //     top: 0
    //         // })
    //         $(iframeBox).append(htmlElement)
    //         setTimeout(function () {
    //             $(element)
    //                 .append(iframeBox)
    //         }, 1000);
    //     };
    //     this.onCalculatedValueChanged = function (settingName, newValue) {
    //     };
    //
    //     this.onSettingsChanged = function (newSettings) {
    //         currentSettings = newSettings;
    //     };
    //     this.getHeight = function () {
    //         return Number(2);
    //     };
    //
    //     this.onSettingsChanged(settings);
    // };
    // freeboard.loadWidgetPlugin({
    //     type_name: "pic2",
    //     display_name: "3D机房",
    //     "external_scripts": [
    //         "plugins/thirdparty/jquery.sparkline.min.js"
    //     ],
    //     settings: [
    //         {
    //             name: "value",
    //             display_name: "Value",
    //             type: "calculated"
    //         }
    //     ],
    //     newInstance: function (settings, newInstanceCallback) {
    //         newInstanceCallback(new eChartsPic2Widget(settings));
    //     }
    // });

    // 业务承载概况
    // var eChartsPic3Widget = function (settings) {
    //     var iframeSrc = "http://10.193.98.8/cas/login?username=admin&username2=c21hcnRhZG1pbg==&module=/hostmgr/topology/display&hideHeader=true";
    //     var htmlElement = $('<iframe src=' + iframeSrc + ' width="180px" height="130px">');
    //     var iframeBox = $('<div></div>')
    //     var currentSettings = settings;
    //     this.render = function (element) {
    //         $(element).empty();
    //         $(iframeBox).css({
    //             position: "relative",
    //             overflow: "hidden",
    //             height: "130px",
    //             width: "180px"
    //         })
    //         // $(htmlElement).css({
    //         //     transform: "scale(0.15)",
    //         //     position: "absolute",
    //         //     left: "-62px",
    //         //     top: 0
    //         // })
    //         $(iframeBox).append(htmlElement)
    //         setTimeout(function () {
    //             $(element)
    //                 .append(iframeBox)
    //         }, 1000);
    //     };
    //     this.onCalculatedValueChanged = function (settingName, newValue) {
    //     };
    //
    //     this.onSettingsChanged = function (newSettings) {
    //         currentSettings = newSettings;
    //     };
    //     this.getHeight = function () {
    //         return Number(2);
    //     };
    //
    //     this.onSettingsChanged(settings);
    // };
    // freeboard.loadWidgetPlugin({
    //     type_name: "pic3",
    //     display_name: "图片3",
    //     "external_scripts": [
    //         "plugins/thirdparty/jquery.sparkline.min.js"
    //     ],
    //     settings: [
    //         {
    //             name: "value",
    //             display_name: "Value",
    //             type: "calculated"
    //         }
    //     ],
    //     newInstance: function (settings, newInstanceCallback) {
    //         newInstanceCallback(new eChartsPic3Widget(settings));
    //     }
    // });

    // 网络设备使用率
    var eChartsUtilizationRateWidget = function (settings) {
        var thisGaugeID_1 = "gauge-" + gaugeID++;
        var thisGaugeID_2 = "gauge-" + gaugeID++;
        var thisGaugeID_3 = "gauge-" + gaugeID++;
        var htmlElement_1 = $('<div class="custom-widget" style="width: 100%;">' + '<div class="custom-wrapper" id="' + thisGaugeID_1 + '" style="height:160px;"></div>' + '</div>');
        var htmlElement_2 = $('<div class="custom-widget" style="width: 100%;">' + '<div class="custom-wrapper" id="' + thisGaugeID_2 + '" style="height:160px;"></div>' + '</div>');
        var htmlElement_3 = $('<div class="custom-widget" style="width: 100%;">' + '<div class="custom-wrapper" id="' + thisGaugeID_3 + '" style="height:140px;"></div>' + '</div>');
        var barValue_1
        var barValue_2
        var currentSettings = settings;
        var option_1 = {
            title: {
                text: "线路带宽使用率",
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                left: "center",
                top: 10
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    for (var i = 0; i < barValue_1.yData.length; i++) {
                        if (params[0].name === barValue_1.yData[i].name) {
                            var str = barValue_1.yData[i].newname
                            var len = barValue_1.yData[i].newname.length
                            return '<div><p>' + [
                                str.substring(0, len / 4), str.substring(len / 4, len / 4 * 2), str.substring(len / 4 * 2, len / 4 * 3), str.substring(len / 4 * 3, len / 4 * 4), str.substring(len / 4 * 4, len / 4 * 5), str.substring(len / 4 * 4, len) + ':' + params[0].value
                            ].join('</p><p>') + '</p></div>'
                        }
                    }
                },
                position: [50, 50]
            },

            xAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",
                    formatter: "{value}" + "%",
                    fontSize: 8
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: "#eee",
                        opacity: 0.2,
                        width: 3
                    }
                },
                max: 100
            },
            yAxis: {
                type: "category",
                axisLabel: {
                    color: "#fff",
                    fontSize: 8
                },
                axisLine: {
                    lineStyle: {
                        width: 4,
                        color: "#3060a9"
                    }
                },
                axisTick: {
                    show: false
                },
                data: ['线路5', '线路4', '线路3', '线路2', '线路1']
            },
            grid: {
                bottom: 0,
                top: 45,
                left: 0,
                right: 10,
                containLabel: true
            },
            barWidth: 10,
            series: [
                {
                    name: "温度",
                    type: "bar",
                    stack: "总量",
                    itemStyle: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [
                                    {offset: 0, color: "#2068bb"},
                                    {offset: 1, color: "#01ffff"}
                                ]
                            );
                        }
                    },
                    data: []
                },
                {
                    name: "背景",
                    type: "bar",
                    stack: "总量",
                    data: [100, 100, 100, 100, 100],
                    itemStyle: {
                        color: "#123971"
                    }
                },
            ]
        };
        var option_2 = {
            title: {
                text: "线路总流量排行",
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                left: "center",
                top: 10
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    for (var i = 0; i < barValue_1.yData.length; i++) {
                        if (params[0].name === barValue_1.yData[i].name) {
                            var str = barValue_1.yData[i].newname
                            var len = barValue_1.yData[i].newname.length
                            return '<div><p>' + [
                                str.substring(0, len / 4), str.substring(len / 4, len / 4 * 2), str.substring(len / 4 * 2, len / 4 * 3), str.substring(len / 4 * 3, len / 4 * 4), str.substring(len / 4 * 4, len / 4 * 5), str.substring(len / 4 * 4, len) + ':' + params[0].value
                            ].join('</p><p>') + '</p></div>'
                        }
                    }
                },
                position: [50, 50]
            },
            xAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",
                    formatter: "{value}",
                    fontSize: 8
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: "#eee",
                        opacity: 0.2,
                        width: 3
                    }
                }
            },
            yAxis: {
                type: "category",
                axisLabel: {
                    color: "#fff",
                    fontSize: 8
                },
                axisLine: {
                    lineStyle: {
                        width: 4,
                        color: "#3060a9"
                    }
                },
                axisTick: {
                    show: false
                },
                data: ['线路5', '线路4', '线路3', '线路2', '线路1']
            },
            grid: {
                bottom: 0,
                top: 45,
                left: 0,
                right: 10,
                containLabel: true
            },
            barWidth: 10,
            series: [
                {
                    name: "温度",
                    type: "bar",
                    stack: "总量",
                    itemStyle: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [
                                    {offset: 0, color: "#2068bb"},
                                    {offset: 1, color: "#01ffff"}
                                ]
                            );
                        }
                    },
                    data: [],
                }
            ]
        };
        // var option_2 = {
        //     title: {
        //         text: "线路总流量排行",
        //         textStyle: {
        //             color: "#fff",
        //             fontSize: 14,
        //             fontWeight: 'bold'
        //         },
        //         left: "center",
        //         top: 10
        //     },
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        //             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        //         },
        //         formatter: function (params) {
        //             for (var i = 0; i < barValue_2.yData.length; i++) {
        //                 if(params[0].name === barValue_2.yData[i].name) {
        //                     return '<div><p>' + [
        //                         barValue_2.yData[i].newname + ':' +params[0].value
        //                     ].join('</p><p>') + '</p></div>'
        //                 }
        //             }
        //         }
        //     },
        //     xAxis: {
        //         type: "value",
        //         boundaryGap: [0, 0.01],
        //         axisLine: {
        //             show: false
        //         },
        //         axisLabel: {
        //             color: "#fff",
        //             showMaxLabel: true,
        //             fontSize: 8
        //         },
        //         axisTick: {
        //             show: false
        //         },
        //         splitLine: {
        //             lineStyle: {
        //                 color: "#eee",
        //                 opacity: 0.2,
        //                 width: 3
        //             }
        //         }
        //     },
        //     yAxis: {
        //         type: "category",
        //         axisLabel: {
        //             color: "#fff",
        //             fontSize: 8
        //         },
        //         axisLine: {
        //             lineStyle: {
        //                 width: 4,
        //                 color: "#3060a9"
        //             }
        //         },
        //         axisTick: {
        //             show: false
        //         },
        //         data: ['线路5','线路4','线路3','线路2','线路1']
        //     },
        //     grid: {
        //         bottom: 0,
        //         top: 45,
        //         left: 0,
        //         right: 12,
        //         containLabel: true
        //     },
        //     series: [
        //         {
        //             name: "温度",
        //             type: "bar",
        //             stack: "总量",
        //             barWidth: 10,
        //             itemStyle: {
        //                 color: function (params) {
        //                     return new echarts.graphic.LinearGradient(0, 0, 1, 0,
        //                         [
        //                             {offset: 0, color: "#2068bb"},
        //                             {offset: 1, color: "#01ffff"}
        //                         ]
        //                     );
        //                 }
        //             }
        //         },
        //         {
        //             // name: "背景",
        //             type: "bar",
        //             itemStyle: {
        //                 color: "#fff"
        //             }
        //         },
        //     ]
        // };
        var option_3 = {
            title: {
                text: "设备性能分析",
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                left: "center",
                top: 10
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: "category",
                data: [],
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#1edfe3",
                        opacity: 0.2,
                    }
                },
                axisTick: {
                    show: false,
                    interval: 0
                },
                axisLine: {
                    lineStyle: {
                        color: "#1edfe3",
                        opacity: 0.2
                    }
                },
                axisLabel: {
                    color: "#fff",
                    fontSize: 8, //fontSize: 7,
                    interval: 0,
                    rotate: 10,
                }
            },
            yAxis: {
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: "#eee",
                        opacity: 0.2,
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#1edfe3",
                        opacity: 0.2
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: "#1edfe3",
                        opacity: 0.2
                    }
                },
                axisLabel: {
                    color: "#fff",
                    fontSize: 9
                }
            },
            grid: {
                left: 0,
                right: 65,
                top: 40,
                bottom: 10,
                containLabel: true
            },
            legend: {
                data: ["CPU使用率", "内存使用率"],
                orient: "vertical",
                right: 0,
                top: "30%",
                textStyle: {
                    color: "#fff",
                    fontSize: 8
                },
                icon: "rect",
                selectedMode: false,
                itemWidth: 8,
                itemHeight: 8
            },
            series: [{
                name: "CPU使用率",
                data: [],
                type: "line",
                lineStyle: {
                    color: "#2ef7f8"
                },
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: "#2ef7f8"
                }
            }, {
                name: "内存使用率",
                data: [],
                type: "line",
                lineStyle: {
                    color: "#b9696c"
                },
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: "#b9696c"
                }
            }]
        };
        var creatElement = function () {
            setTimeout(function () {
                var dom_1 = document.getElementById(thisGaugeID_1);
                var dom_2 = document.getElementById(thisGaugeID_2);
                var dom_3 = document.getElementById(thisGaugeID_3);
                var myChart_1 = echarts.init(dom_1);
                var myChart_2 = echarts.init(dom_2);
                var myChart_3 = echarts.init(dom_3);
                myChart_1.setOption(option_1, true);
                myChart_2.setOption(option_2, true);
                myChart_3.setOption(option_3, true);
            }, 1000);
        };
        var maxValue = function (dataArray) {
            var bgArray = [];
            for (var i = 0; i < dataArray.length; i++) {
                var bgValue = 100 - dataArray[i];
                bgArray.push(bgValue)
            }
            return bgArray
        };
        this.render = function (element) {
            $(element)
                .append(htmlElement_1)
                .append(htmlElement_2)
                .append(htmlElement_3);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value_1 = newValue.bar_1;
            barValue_1 = value_1
            // option_1.yAxis.data = value_1.yData;
            option_1.series[0].data = value_1.xData;
            // option_1.series[0].name = value_1.yData;
            option_1.series[1].data = maxValue(value_1.xData);
            var value_2 = newValue.bar_2;
            barValue_2 = value_2
            // option_2.yAxis.data = value_2.yData;
            option_2.series[0].data = value_2.xData
            // option_2.series[1].data = maxValue(value_2.xData);
            var value_3 = newValue.line;
            option_3.xAxis.data = value_3.xData;
            option_3.series[0].data = value_3.data_1;
            option_3.series[1].data = value_3.data_2;
            creatElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(7.5);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "UtilizationRate",
        display_name: "网络设备使用率",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsUtilizationRateWidget(settings));
        }
    });

    // 应用健康度
    var eChartsHealthyWidget = function (settings) {
        var htmlElement = $('<div class="box"></div>')
        var imgElement
        var data
        var currentSettings = settings;
        var createElement = function () {
            imgElement = ""
            for (var i = 0; i < data.length; i++) {
                imgElement += "<div class='img-box img_" + i + "'>" +
                    "<div class='border'>" +
                    "<h1 class='title'>" + data[i].title + "</h1>" +
                    "<div class='content-box purple'>" +
                    "<p style='margin: 0px 0;'>" + data[i].text_1 + "</p>" +
                    "<p style='margin: 0px 0;'>" + data[i].num + "</p>" +
                    "</div>" +
                    "<div class='content-box orange'>" +
                    "<p style='margin: 0px 0;'>" + data[i].text_2 + "</p>" +
                    "<p style='margin: 0px 0;'>" + data[i].light + "</p>" +
                    "</div>" +
                    "<div class='content-box green'>" +
                    "<p style='margin: 0px 0;'>" + data[i].text_3 + "</p>" +
                    "<p style='margin: 0px 0;'>" + data[i].medium + "</p>" +
                    "</div>" +
                    "<div class='content-box green'>" +
                    "<p style='margin: 0px 0;'>" + data[i].text_4 + "</p>" +
                    "<p style='margin: 0px 0;'>" + data[i].serious + "</p>" +
                    "</div>" +
                    "</div>" +
                    "</div>"
            }
        }
        this.render = function (element) {
            $(element).empty();
            $(element).css({
                perspective: "800px"
            })
            setTimeout(function () {
                $(htmlElement)
                    .append(imgElement)
                $(element)
                    .append(htmlElement)
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            data = newValue
            createElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(3.5);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "healthy",
        display_name: "应用健康度",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsHealthyWidget(settings));
        }
    });

    // 服务性能分析
    var eChartsServeWidget = function (settings) {
        var htmlElement = $('<div class="custom-widget"></div>');
        var currentSettings = settings;
        var tableElement = $('<table style="text-align: center;color: #fff"></table>');
        var th;
        var tr;
        var tableData;
        var title = $('<p>设备性能分析</p>');
        var createElement = function () {
            th = "<tr style='font-size: 11px;line-height: 25px'><th colspan='2'>CPU</th><th>设备名称</th><th colspan='2'>MEM</th></tr>";
            for (var i = 0; i < tableData.length; i++) {
                tr +=
                    "<tr style='height: 25px;line-height: 25px;font-size: 8px;'>" +
                    "<td style='padding: 0 5px;width: 50px'>" + tableData[i].cpu + "%" + "</td>" +
                    "<td style='width: 100px;padding: 0 5px'>" + percentLeft(tableData[i].cpu).outerHTML + "</td>" +
                    "<td style='padding: 0 5px'>" + tableData[i].name + "</td>" +
                    "<td style='width: 100px;padding: 0 5px'>" + percentRight(tableData[i].men).outerHTML + "</td>" +
                    "<td style='padding: 0 5px;width: 50px'>" + tableData[i].men + "%" + "</td>" +
                    "</tr>"
            }
        };
        var percentLeft = function (val) {
            var item = $('<div></div>');
            if (val < 30) {
                $(item).css({
                    backgroundImage: "linear-gradient(to left, #0b4b9b,#0195d7)",
                    width: 100 * val / 100 + "px",
                    borderRadius: "2.5px",
                    height: "5px",
                    float: "right"
                })
            } else if (val >= 30 && val < 60) {
                $(item).css({
                    backgroundImage: "linear-gradient(to left, #0b4b9b,#e4e00d)",
                    width: 100 * val / 100 + "px",
                    borderRadius: "2.5px",
                    height: "5px",
                    float: "right"
                })
            } else if (val >= 60 && val < 100) {
                $(item).css({
                    backgroundImage: "linear-gradient(to left, #0b4b9b,#e51a1a)",
                    width: 100 * val / 100 + "px",
                    borderRadius: "2.5px",
                    height: "5px",
                    float: "right"
                })
            }
            return item[0]
        };
        var percentRight = function (val) {
            var item = $('<div></div>');
            if (val < 30) {
                $(item).css({
                    backgroundImage: "linear-gradient(to right, #0b4b9b,#0195d7)",
                    width: 100 * val / 100 + "px",
                    borderRadius: "2.5px",
                    height: "5px"
                })
            } else if (val >= 30 && val < 60) {
                $(item).css({
                    backgroundImage: "linear-gradient(to right, #0b4b9b,#e4e00d)",
                    width: 100 * val / 100 + "px",
                    borderRadius: "2.5px",
                    height: "5px"
                })
            } else if (val >= 60 && val < 100) {
                $(item).css({
                    backgroundImage: "linear-gradient(to right, rgba(0,0,0,0.1),#e51a1a)",
                    width: 100 * val / 100 + "px",
                    borderRadius: "2.5px",
                    height: "5px"
                })
            }
            return item[0]
        };
        this.render = function (element) {
            $(element).empty();
            $(title).css({
                // backgroundImage: "url(././img/table-title.png)",
                width: "158px",
                height: "20px",
                margin: "14px auto",
                backgroundSize: "100% 100%",
                textAlign: "center",
                color: "#fff",
                lineHeight: "20px",
                fontSize: "14px",
                fontWeight: "bold"
            });
            setTimeout(function () {
                $(tableElement)
                    .append(th)
                    .append(tr);
                $(htmlElement)
                    .append(title)
                    .append(tableElement);
                $(element)
                    .append(htmlElement)
            }, 1000);
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            tableData = newValue
            createElement()
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(4);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "serve",
        display_name: "服务性能分析",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsServeWidget(settings));
        }
    });

    // 虚拟
    var eChartsHostWidget = function (settings) {
        var autoIndex = 0;
        var idList = [];
        var optionList = [];
        var el = "";
        var timer;
        var currentSettings = settings;

        var creatElement = function () {

            setTimeout(function () {

                $.each(idList, function (i, items) {
                    var dom = document.getElementById(items);
                    var myChart = echarts.init(dom);
                    myChart.setOption(optionList[i], true);
                });

                autoIndex = 0;

                $(".pieAuto").hide();
                $(".pieAuto:eq(" + (autoIndex * 3) + ")").css("display", "inline-block");
                $(".pieAuto:eq(" + (autoIndex * 3 + 1) + ")").css("display", "inline-block");
                $(".pieAuto:eq(" + (autoIndex * 3 + 2) + ")").css("display", "inline-block");

                clearInterval(timer);

                if ($(".pieAuto").length > 3) {

                    timer = setInterval(function () {

                        if (autoIndex >= (Math.ceil($(".pieAuto").length / 3))) {
                            autoIndex = 0;
                        }

                        $(".pieAuto").hide();
                        $(".pieAuto:eq(" + (autoIndex * 3) + ")").css("display", "inline-block");
                        $(".pieAuto:eq(" + (autoIndex * 3 + 1) + ")").css("display", "inline-block");
                        $(".pieAuto:eq(" + (autoIndex * 3 + 2) + ")").css("display", "inline-block");

                        autoIndex++;

                    }, 3000);
                }

            }, 1000);
        };
        this.render = function (element) {
            el = element
        };
        this.onCalculatedValueChanged = function (settingName, newValue) {
            var value = newValue;
            idList = [];
            optionList = [];
            $(el).html("");
            for (var i = 0; i < value.length; i++) {
                if (value[i]) {
                    var thisGaugeID = "gauge-" + gaugeID++;
                    var htmlElement = $('<div class="custom-widget pieAuto" style="width: 30%;display: inline-block;">' + '<div class="custom-wrapper" id="' + thisGaugeID + '" style="height:100px;"></div>' + '</div>');
                    var option = {};
                    if (i % 3 === 0) {
                        option = {
                            title: {
                                text: "",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 11,
                                    fontWeight: 'bold'
                                },
                                left: "center",
                                bottom: 0
                            },
                            series: [
                                {
                                    name: "主机1",
                                    type: 'pie',
                                    radius: ['45%', '70%'],
                                    center: ['50%', '35%'],
                                    hoverAnimation: false,
                                    label: {
                                        position: 'center',
                                        formatter: '{d}' + '%',
                                        color: '#08ddef'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [
                                        {
                                            value: null, name: '直接访问', itemStyle: {
                                                color: {
                                                    type: 'linear',
                                                    x: 0,
                                                    y: 0,
                                                    x2: 0,
                                                    y2: 1,
                                                    colorStops: [{
                                                        offset: 0, color: '#2068bb' // 0% 处的颜色
                                                    }, {
                                                        offset: 1, color: '#01ffff' // 100% 处的颜色
                                                    }],
                                                    global: false // 缺省为 false
                                                }
                                            }
                                        },
                                        {
                                            value: null, name: '邮件营销',
                                            itemStyle: {
                                                opacity: 0
                                            },
                                            label: {
                                                show: false
                                            }
                                        }
                                    ]
                                }
                            ]
                        };
                    } else if (i % 3 === 1) {

                        option = {
                            title: {
                                text: "",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 11,
                                    fontWeight: 'bold'
                                },
                                left: "center",
                                bottom: 0
                            },
                            series: [
                                {
                                    name: "主机1",
                                    type: 'pie',
                                    radius: ['45%', '70%'],
                                    center: ['50%', '35%'],
                                    hoverAnimation: false,
                                    label: {
                                        position: 'center',
                                        formatter: '{d}' + '%',
                                        color: '#fc8d1d'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [
                                        {
                                            value: null, name: '直接访问', itemStyle: {
                                                color: {
                                                    type: 'linear',
                                                    x: 0,
                                                    y: 0,
                                                    x2: 0,
                                                    y2: 1,
                                                    colorStops: [{
                                                        offset: 0, color: '#fe7c14' // 0% 处的颜色
                                                    }, {
                                                        offset: 1, color: '#f6bd38' // 100% 处的颜色
                                                    }],
                                                    global: false // 缺省为 false
                                                }
                                            }
                                        },
                                        {
                                            value: null, name: '邮件营销',
                                            itemStyle: {
                                                opacity: 0
                                            },
                                            label: {
                                                show: false
                                            }
                                        }
                                    ]
                                }
                            ]
                        };
                    } else if (i % 3 === 2) {

                        option = {
                            title: {
                                text: "",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 11,
                                    fontWeight: 'bold'
                                },
                                left: "center",
                                bottom: 0
                            },
                            series: [
                                {
                                    name: "主机1",
                                    type: 'pie',
                                    radius: ['45%', '70%'],
                                    center: ['50%', '35%'],
                                    hoverAnimation: false,
                                    label: {
                                        position: 'center',
                                        formatter: '{d}' + '天',
                                        color: '#71b666'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [
                                        {
                                            value: null, name: '直接访问', itemStyle: {
                                                color: {
                                                    type: 'linear',
                                                    x: 0,
                                                    y: 0,
                                                    x2: 0,
                                                    y2: 1,
                                                    colorStops: [{
                                                        offset: 0, color: '#639d0a' // 0% 处的颜色
                                                    }, {
                                                        offset: 1, color: '#90dd1c' // 100% 处的颜色
                                                    }],
                                                    global: false // 缺省为 false
                                                }
                                            }
                                        },
                                        {
                                            value: null,
                                            name: '邮件营销',
                                            itemStyle: {
                                                opacity: 0
                                            },
                                            label: {
                                                show: false
                                            }
                                        }
                                    ]
                                }
                            ]
                        };
                    }

                    option.title.text = value[i].title + '\n' + value[i].equName;
                    option.series[0].data[0].value = value[i].value;
                    option.series[0].data[1].value = 100 - value[i].value;
                    option.series[0].label.formatter = '{d}' + value[i].unit;

                    $(el).append(htmlElement);

                    idList.push(thisGaugeID);
                    optionList.push(option);
                }
            }

            creatElement();
        };

        this.onSettingsChanged = function (newSettings) {
            currentSettings = newSettings;
        };
        this.getHeight = function () {
            return Number(1.5);
        };

        this.onSettingsChanged(settings);
    };
    freeboard.loadWidgetPlugin({
        type_name: "host",
        display_name: "主机",
        "external_scripts": [
            "plugins/thirdparty/jquery.sparkline.min.js"
        ],
        settings: [
            {
                name: "value",
                display_name: "Value",
                type: "calculated"
            }
        ],
        newInstance: function (settings, newInstanceCallback) {
            newInstanceCallback(new eChartsHostWidget(settings));
        }
    });

}());
